<template>
  <div class="app-wrapper">
    <div class="logicflow-custom-panel" id="js_custom-dnd" style="height: 500px;overflow-y: scroll"
         @mousedown="insertNode" @click="addNode">

      <el-card v-for="(item,index) in componentList" :key="index" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{ item.cgName }}</span>
        </div>
        <div v-for="(subItem,sunIndex) in item.children" :key="sunIndex" class="item">
          <el-row>
            <el-col :span="5">
              <el-image :src="'data:image/svg+xml;base64,'+subItem.icon" style="width: 30px; height: 30px"/>
            </el-col>

            <el-col :span="5">
              <div class="grid-content" :data-type="subItem.type" style="margin-top: 4px;cursor: pointer;"
                   :title="subItem.description">
                {{ subItem.name }}
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script>
import {post} from "../../config/Request.js";
import SquareLakeNormalHtml from "@/components/flow/node/SquareLakeNormalHtml.js";
import apis from "@/request/apis.js";

export default {
  name: 'SquareLakeComponentList',
  props: ["graph", "renderFlow"],
  data() {
    return {
      componentList: []
    }
  },
  created() {
    // this.initList();
  },
  mounted() {
    this.initList();
    // this.initG6();
  },
  watch: {
    graph: function (newVal) {
      this.componentList.forEach((e) => {
        if (e.children) {
          e.children.forEach((ee) => {
            var sb = {
              type: ee.type, model: SquareLakeNormalHtml.model, view: SquareLakeNormalHtml.view
            }
            newVal.register(sb);
          });

        }
      });
      this.renderFlow();
    }
  },
  methods: {
    async initList() {
      const data = await apis.post("/square-lake/process/component/list");
      const dc = JSON.parse(JSON.stringify(data));
      // var svb = this.graph;
      dc.forEach((e) => {
        if (e.children) {
          e.children.forEach((ee) => {
            if (ee.icon) {
              ee.icon = window.btoa(ee.icon);
            } else {
              ee.icon = window.btoa("<svg t=\"1670117592520\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"5890\" width=\"200\" height=\"200\"><path d=\"M914.5 653.5c-5.5 0-11 1.1-16 3.3l-0.2 0.1h-0.2L510.2 822.2 122.2 657h-0.2l-0.2-0.1c-5-2.1-10.3-3.3-16-3.3-23.1 0-41.8 19.3-41.8 43.1 0 18 10.7 33.3 25.8 39.8l403.9 172.1 0.4 0.1c10.2 4.4 21.8 4.4 32 0l0.2-0.1c0.1 0 0.1-0.1 0.2-0.1l403.9-172.1c15.1-6.5 25.8-21.8 25.8-39.8 0.1-23.8-18.6-43.1-41.7-43.1z m0-186.5c-7.9-0.2-16 3.2-16 3.2L510.2 635.6 121.8 470.2s-10.3-3.2-16-3.2C82.7 467 64 486.2 64 510c0 17.9 10.7 33.3 25.8 39.7l403.9 172c0.1 0 0.1 0.1 0.2 0.1l0.1 0.1c5 2.1 10.3 3.3 16 3.3 5.7 0 11.1-1.2 16-3.3l0.2-0.1c0.1 0 0.1 0 0.2-0.1l403.9-172c15.1-6.4 25.8-21.8 25.9-39.7 0.1-23.8-18.6-43-41.7-43zM89.8 363.2l403.9 172.1c0.1 0 0.1 0 0.2 0.1l0.1 0.1c5 2.1 10.3 3.2 16 3.2 5.5 0 10.9-1.1 16-3.2l0.2-0.1 0.2-0.1 403.9-172c15.1-6.5 25.8-21.8 25.9-39.7 0-18-10.7-33.3-25.8-39.8L526.5 111.6c-0.1 0-0.1 0-0.2-0.1l-0.2-0.1c-10.2-4.4-21.8-4.4-32 0l-0.1 0.1L89.8 283.7C74.7 290.1 64 305.5 64 323.5c0 17.9 10.7 33.2 25.8 39.7z\" p-id=\"5891\"></path></svg>");
            }
            ee.cgCode = e.cgCode;
          });
          //
          // e.children.push({
          //   category: "输入",
          //   description: "json输入",
          //   icon: "",
          //   name: "测试html自定义节点",
          //   type: "cesss"
          // })

        }
      })
      this.componentList = dc;
    },
    addNode(e) {
      const type = e.target.getAttribute("data-type");
      if (type) {
        let data = null;
        //获得根type相关的数据
        this.componentList.forEach(e => {
          if (e.children) {
            e.children.forEach((ee) => {
              if (ee.type == type) {
                data = ee;
              }
            })
          }
        })
        if (this.graph.dnd) {
          this.graph.addNode({
            type,
            text: `${data.name}`,
            x: 500,
            y: 300,
            properties: {
              code: data.type,
              icon: data.icon,
              name: data.name,
              cgCode: data.cgCode
            }
          });
        }
      }
    },
    insertNode(e) {
      //阻止事件冒泡
      e.preventDefault();
      const type = e.target.getAttribute("data-type");
      if (type) {
        let data = null;
        //获得根type相关的数据
        this.componentList.forEach(e => {
          if (e.children) {
            e.children.forEach((ee) => {
              if (ee.type == type) {
                data = ee;
              }
            })
          }
        })
        if (this.graph.dnd) {
          this.graph.dnd.startDrag({
            type,
            text: `${data.name}`,
            properties: {
              code: data.type,
              icon: data.icon,
              name: data.name,
              cgCode: data.cgCode
            }
          });
        }
      }
    },
  }
}
</script>
<style scoped>
.app-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.logicflow-custom-panel {
  position: absolute;
  /*width: 300px;*/
  height: auto;
  padding: 5px;
  top: 0;
  z-index: 1;
  background: #ffffff;
  border: 1px solid #efeaef;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 350px;
}

</style>
